// 图片画廊
import React from 'react'
import { Card, Row, Col, Modal } from 'antd';
import './ui.less'

const { Meta } = Card;
class Gallerys extends React.Component {
    state = {
        visible: false
    }

    openImg = (imgSrc) => {
        this.setState({
            currentImg: '/gallery/' + imgSrc,
            visible: true
        })
    }
    
    render() {

       
        const imgs = [
            ['1.png', '2.png', '3.png', '4.png', '5.png'],
            ['6.png', '7.png', '8.png', '9.png', '10.png'],
            ['11.png', '12.png', '13.png', '14.png', '15.png'],
            ['16.png', '17.png', '18.png', '19.png', '20.png'],
            ['21.png', '22.png', '23.png', '24.png', '25.png'],
            ['26.png', '27.png', '28.png', '29.png', '30.jpg']
        ];

        const imgList = imgs.map((List) => List.map((item) => {
            return <Card 
                cover={<img alt="" src={'/gallery/' +  item} onClick={() => this.openImg(item)} />}
            >
                <Meta
                    title="Europe Street beat"
                    description="www.instagram.com"
                />
            </Card>
        }))

        return (
            <div>
                <Card className="warp">
                    <Row gutter={10}>
                        <Col md={4}>
                            {imgList[0]}
                        </Col>
                        <Col md={4}>
                            {imgList[1]}
                        </Col>
                        <Col md={4}>
                            {imgList[2]}
                        </Col>
                        <Col md={4}>
                            {imgList[3]}
                        </Col>
                        <Col md={4}>
                            {imgList[4]}
                        </Col>
                        <Col md={4}>
                            {imgList[5]}
                        </Col>
                    </Row>
                    <Modal
                        width={300}
                        height={500}
                        footer={null}
                        title='图片画廊'
                        visible={this.state.visible}
                        onCancel={() =>{
                            this.setState({
                                visible: false
                            })
                        }}
                    >
                        {<img alt="" src={ this.state.currentImg } style={{ width: '100%'}}/>}
                    </Modal>
                </Card>
            </div>
        )
    }
}


export default Gallerys